<template>
	<view v-if="order">
		<view class="top flex-row justify-center align-center"></view>

		<view class="projects padding-lr padding-top">
			<view class="bg-white padding border-radius">
				<view class="main flex-row justify-between align-center margin-top-xs">
					<u-avatar :src="order.product_pic" mode="square" size="140"></u-avatar>
					<view class="right">
						<view class="u-line-1">{{order.product_name}}</view>
						<view class="u-line-1 margin-tb-xs text-orange">{{order.total_price<0?'价格商议中':'￥'+order.total_price}}</view>
						<view class="u-line-1 text-gray">{{order.merchant?order.merchant.merchant_name:''}}</view>
					</view>
				</view>

				<view class="btns flex-row justify-between align-center margin-top-xl">
					<view class="btn red" v-if="order.status == -1 && order.can_pay == 1" @click.stop="$goto('/pages/order/create?no=' + order.trade_no, 'redirect')">填写订单</view>
					<view class="btn red" v-if="order.status == -1 && order.can_pay > 1" @click.stop="$goto('/pages/order/pay?no=' + order.trade_no, 'redirect')">去付款</view>
					<view class="btn red" v-if="order.status>3 && order.paid_status==0" @click.stop="$goto('/pages/order/pay?no=' + order.trade_no + '&rest=1', 'redirect')">付尾款</view>
					<view class="btn red" v-if="order.status == 7" @click.stop="$goto('/pages/comment/submit?no='+order.trade_no)">去评价</view>
					<view class="btn" v-if="order.status == -1" @click.stop="cancelModal=true">取消订单</view>
				</view>

				<!-- 取消订单 -->
				<u-modal v-model="cancelModal" content="确定取消该订单？" show-cancel-button @confirm="cancelOrder" @cancel="cancelModal=false"></u-modal>
			</view>
		</view>

		<view class="card">
			<view class="line">
				<text class="title">订单编号</text>
				<text class="info">{{order.trade_no}}</text>
			</view>
			<view class="line">
				<text class="title">创建日期</text>
				<text class="info">{{order.created_at}}</text>
			</view>
			<view class="line">
				<text class="title">已付金额</text>
				<text class="info">{{order.paid_price<0?'0':order.paid_price}}</text>
			</view>
			<view class="line">
				<text class="title">订单进度</text>
				<text class="info">{{order.status_text}}</text>
			</view>
		</view>

		<view class="progress-top">订单进度</view>
		<view class="progress">
			<view class="line"></view>
			<view class="step" :class="{active: i.current}" v-for="(i,k) in proComplete" :key="k">
				<view class="status"></view>
				<view class="text">{{i.text}}</view>
			</view>
		</view>

		<view class="card" v-if="detail.url">
			<view class="line justify-between align-center">
				<view class="u-line-1" style="width: 600rpx;">
					<text class="title">稿件链接</text>
					<text class="info">{{detail.url}}</text>
				</view>
				<image src="../../static/images/copy.png" style="width: 32rpx;" mode="widthFix" @click="copy"></image>
			</view>
		</view>
		
		<view class="card" v-if="contract.url">
			<view class="line justify-between align-center">
				<view class="u-line-1" style="width: 600rpx;">
					<text class="title">合同下载</text>
					<text class="info"></text>
				</view>
				<image src="../../static/images/down.png" style="width: 32rpx;" mode="widthFix" @click="open"></image>
			</view>
		</view>

		<view class="card padding flex-row justify-between">
			<view class="box">
				<view class="margin-bottom text-sm">初稿图预览</view>
				<u-image :src="detail.first_version" width="280rpx" height="200rpx" mode="" show-error @click="saveHttpImg(detail.first_version)"></u-image>
			</view>
			<view class="box">
				<view class="margin-bottom text-sm">定稿图预览</view>
				<u-image :src="detail.final_version" width="280rpx" height="200rpx" mode="" show-error @click="saveHttpImg(detail.final_version)"></u-image>
			</view>
		</view>
		
		<my-btn gold style="margin: 60rpx auto" @click="$goto('/pages/order/hetong?no='+no)" v-if="contract.status==0">填写合同</my-btn>
		<my-btn gold style="margin: 60rpx auto" @click="confirm" v-if="order.status==6">完成订单</my-btn>
		<my-btn gold style="margin: 60rpx auto" @click="downFapiao" v-if="order.status==8">下载发票</my-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: '',
				cancelModal: false,
				order: '',
				detail: '',
				contract: '',
				process: []
			};
		},
		computed: {
			proComplete() {
				let arr = []
				for (let item of this.process) {
					if (item.flag) arr.push(item)
				}
				return arr
			}
		},
		onLoad(opt) {
			this.no = opt.no
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$u.get('/order/detail?trade_no=' + this.no).then(res => {
					let order = res.data.result.order
					this.order = order
					this.detail = order.detail
					this.contract = order.contract
					this.process = order.process
					uni.hideLoading()
				})
			},
			cancelOrder() {
				uni.showLoading({
					title: '取消中...',
					mask: true
				})
				this.$u.get('/order/cancel?trade_no=' + this.no).then(res => {
					this.$msg(res.data.msg, 1000, true)
					setTimeout(() => {
						this.$goto('/pages/order/list', 'redirect')
					}, 1000)
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.detail.url,
					success: () => {
						this.$msg('复制成功');
						this.pop = false
					}
				});
			},
			open() {
				plus.runtime.openURL(this.contract.url);
			},
			saveHttpImg(url) {
				let _t = this;
				if (url) {
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								let file = res.tempFilePath;
								uni.showModal({
									title: '提示',
									content: '保存到相册？',
									success: function(res) {
										if (res.confirm) {
											_t.save(file)
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						}
					});
				}
			},
			save(url) {
				let _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						uni.hideLoading();
						_this.$msg("图片已保存");
					},
					fail: () => {
						uni.hideLoading();
						_this.$msg("保存失败");
					}
				});
			},
			confirm() {
				this.$u.get('/order/confirm?trade_no='+this.no).then(res => {
					this.$msg(res.data.msg, 1000, true)
					if (res.data.code==0) {
						setTimeout(() => {
							this.$goto('/pages/order/detail?no='+this.no, 'redirect')
						}, 1000)
					}
				})
			},
			downFapiao() {
				
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 750rpx;
		height: 200rpx;
		background: linear-gradient(314deg, rgba(225, 165, 94, 1) 0%, rgba(255, 215, 166, 1) 100%);
	}

	.projects {
		margin-top: -180rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 40rpx;
		}

		.right {
			width: 450rpx;
		}

		.btns {
			.btn {
				width: 280rpx;
				height: 56rpx;
				border-radius: 8rpx;
				border: 1px solid rgba(147, 107, 41, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				border: 1px solid rgba(232, 232, 232, 1);
				color: #E8E8E8;

				&.red {
					border: 1px solid rgba(147, 107, 41, 1);
					color: #936B29;
				}
			}
		}
	}

	.card {
		width: 670rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		margin: 32rpx auto;

		.line {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 32rpx;
			display: flex;

			.title {
				margin-right: 32rpx;
			}

			.info {
				color: black;
			}
		}

		.box {
			width: 280rpx;
			height: 300rpx;
		}
	}

	.progress-top {
		width: 670rpx;
		height: 90rpx;
		background: linear-gradient(270deg, rgba(255, 215, 166, 1) 0%, rgba(225, 165, 94, 1) 100%);
		border-radius: 8rpx 8rpx 0 0;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 90rpx;
		padding-left: 32rpx;
	}

	.progress {
		width: 670rpx;
		background: #fff;
		border-radius: 0 0 8rpx 8rpx;
		margin: 0 auto;
		position: relative;

		.line {
			width: 2rpx;
			height: calc(100% - 64rpx);
			background-color: #EEBC80;
			position: absolute;
			left: 42rpx;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
		}

		.step {
			padding: 24rpx 32rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 34rpx;
			display: flex;
			align-items: center;

			.status {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				margin-right: 32rpx;
				background-color: #FFE8CD;
				position: relative;
				z-index: 3;
			}

			&.active {
				color: rgba(51, 51, 51, 1);

				.status {
					background-color: #EEBC80;
				}
			}
		}
	}
</style>
